<template>
	<view>
		<remind-carinfo :dataBean="dataBean"></remind-carinfo>

		<view class="item" style="margin-bottom: 80rpx">

			<view style="display: inline-flex; height: 80rpx; justify-content: space-between; margin: 0 20rpx;">
				<u-icon name="order" color="#1573FF" label="逾期信息" label-color="#333333"
					:customStyle="{'line-height': '80rpx',}">
				</u-icon>

				<text
					style="line-height: 80rpx; color: #FFC500;">逾期金额/台/元{{dataBean.overdueArrears.uncollectedAmount|filterNull}}</text>
			</view>


			<u-line color="#efefef" :customStyle="{'margin-bottom': '30rpx','display': 'block',}"></u-line>

			<view v-if="dataBean.overdueArrears">
				<view class="text-line">
					<text class="text-name">租赁类型:</text>
					<text class="text-value">{{dataBean.overdueArrears.rentTypeShow|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">车辆订单号:</text>
					<text class="text-value">{{dataBean.overdueArrears.orderCarCode|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">车辆订单状态:</text>
					<text class="text-value">{{dataBean.overdueArrears.orderCarStatusShow|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">客户名称:</text>
					<text class="text-value">{{dataBean.overdueArrears.customerName|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">联系电话:</text>
					<text class="text-value">{{dataBean.overdueArrears.customerTel|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">租赁开始时间:</text>
					<text class="text-value">{{dataBean.overdueArrears.timeStartRent|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">租赁结束时间:</text>
					<text class="text-value">{{dataBean.overdueArrears.timeFinishRent|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">提车时间:</text>
					<text class="text-value">{{dataBean.overdueArrears.timeDelivery|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">合同编号:</text>
					<text class="text-value">{{dataBean.overdueArrears.contractCode|filterNull}}</text>
				</view>

<!--				<view class="text-line">-->
<!--					<text class="text-name">{{"长租"==dataBean.overdueArrears.rentTypeShow-->
<!--              ||"经租"==dataBean.overdueArrears.rentTypeShow?'保证金/台/元:':'首付款/台/元:'}}</text>-->

<!--					<text class="text-value">-->
<!--						{{"长租"==dataBean.overdueArrears.rentTypeShow||"经租"==dataBean.overdueArrears.rentTypeShow?(dataBean.overdueArrears.cashDeposit|filterNull):(dataBean.overdueArrears.downPayment|filterNull)}}-->
<!--					</text>-->
<!--				</view>-->

				<view class="text-line">

          <text class="text-name">
            {{2==dataBean.overdueArrears.rentType?'整备费:'
              :5==dataBean.overdueArrears.rentType?'首付款/元/台:'
                  :1==dataBean.overdueArrears.rentType||3==dataBean.overdueArrears.rentType||4==dataBean.overdueArrears.rentType?'保证金/元/台:'
                      :7==dataBean.overdueArrears.rentType?'挂靠费:'
                          :'总单价:'}}</text>

					<text class="text-value">
            ￥{{dataBean.overdueArrears.cashDeposit|filterNull}}
					</text>
				</view>

				<view class="text-line" v-if="1==dataBean.overdueArrears.rentType||2==dataBean.overdueArrears.rentType||3==dataBean.overdueArrears.rentType||4==dataBean.overdueArrears.rentType||5==dataBean.overdueArrears.rentType">
					<text class="text-name">月租金/台/元:</text>
					<text class="text-value">￥{{dataBean.overdueArrears.monthlyRent|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">付款时间:</text>
					<text class="text-value">{{dataBean.overdueArrears.receivableDate|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">欠款总金额:</text>
					<text class="text-value">{{dataBean.overdueArrears.uncollectedAmount|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">应付总金额:</text>
					<text class="text-value">{{dataBean.overdueArrears.receivableAmount|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">已付金额:</text>
					<text class="text-value">{{dataBean.overdueArrears.receivedAmount|filterNull}}</text>
				</view>


				<u-line color="#efefef" border-style="dashed"
					:customStyle="{'margin-bottom': '30rpx','display': 'block',}"></u-line>

				<view class="text-line">
					<text class="text-name">提单员:</text>
					<text class="text-value">{{dataBean.overdueArrears.salePersonName|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">联系电话:</text>
					<text class="text-value">{{dataBean.overdueArrears.salePersonMobile|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">所属渠道:</text>
					<text class="text-value">{{dataBean.overdueArrears.channelName|filterNull}}</text>
				</view>
			</view>

			<view v-else class="nodata">
				<image src="../../static/remind/no_qx.png" mode=""></image>

				<text>暂无逾期信息</text>
			</view>

		</view>
		<u-modal :show="show" title="收款" showConfirmButton showCancelButton @confirm="collectionConfirm"
			@cancel="collectionCancel" confirmText="提交">
			<view class="slot-content">
				<u-form ref="uform" :model="collection" label-width="auto" :rules="rules">
					<u-form-item label="收款方式">
						<u-radio-group v-model="collection.skType" placement="row" class="u-radio-group" prop="skType">
							<u-radio v-for="(item, index) in skTypeList" :key="index" :label="item.name"
								:name="item.value" :value="item.value">
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="收款金额" v-if="collection.skType=='2'" prop="skAmount">
						<u-input v-model="collection.skAmount" ref="skAmount" disabledColor="#ffffff" border="bottom"
							placeholder="请输入收款金额" type="text"></u-input>
					</u-form-item>
				</u-form>
			</view>
		</u-modal>
		<view class="button-container">
			<button class="btn-item" @click="collectionSave">收款</button>
		</view>
	</view>
</template>

<script>
	import remindCarinfo from '../../components/remind-carinfo.vue';

	export default {
		components: {
			remindCarinfo,
		},
		watch:{
			//监听传入的 initList 的值, 如果发生变化了
			collection: {
						deep:true,
						handler(newVal,oldVal) {
							let that = this
							if(newVal.skType==='2'){
								that.$nextTick(function(){
									that.$refs.skAmount.setFormatter((e)=>{
										return e.replace(/^(-)*(\d+)\.(\d\d).*$/,'$1$2.$3')
									})
								})
								that.rules.skAmount = true;
							}
						},
						immediate:false
			}
		},
		data() {
			return {
				show: false,
				collection: {
					skType: '1',
					skAmount: null,

				},
				skTypeList: [{
						name: '全额收款',
						value: '1'
					},
					{
						name: '部分收款',
						value: '2'
					}
				],
				rules: {
					skAmount: [{
						required: false,
						message: '请输入收款金额',
						trigger: ['blur', 'change'],
					}
				 ],
				},
				dataBean: {
					overdueArrears: {
						uncollectedAmount:null
					},
					vehicle: {

					},
					orderCar: {},
				},
				carId: '',
				componentId: '',
			}
		},
		methods: {
			collectionSave() {
				this.show = true;
			},
			collectionConfirm() {
				let that = this;
				let params = {}
				if(that.collection.skType==='2'){
					let uncollectedAmount = that.dataBean.overdueArrears.uncollectedAmount
					if(uncollectedAmount&&Number(uncollectedAmount)<Number(that.collection.skAmount)){
						uni.$u.toast(`收款金额不能大于应付总额${uncollectedAmount}元`);
						return false;
					}
					if(uncollectedAmount&&Number(uncollectedAmount)<=0){
						uni.$u.toast('收款金额必须大于0');
						return false;
					}
					params = {
						componentId: that.componentId,
						...that.collection
					}
				}else{
					params = {
						componentId: that.componentId,
						skType:that.collection.skType
					}
				}
				that.$refs.uform.validate().then(res => {
					that.$u.api.collection(params).then(
						res => {
							that.collectionCancel()
							uni.$u.toast(res.msg)
							uni.navigateBack({
								delta: 1  //返回一层页面
							});
						}
					);
				})
			},
			collectionCancel() {
				this.collection.skType = '1';
				this.collection.skAmount = null;
				this.$refs.uform.clearValidate(); 
				this.show = false;
			},
		},

		onLoad(op) {
			this.carId = op.carId;
			this.componentId = op.componentId;

			this.$u.api.overduearrearsDetail({
				carId: op.carId,
				componentId: op.componentId
			}).then(
				res => {
					console.log('res', res);
					this.dataBean = res;
				}

			);
		}
	}
</script>

<style lang="scss">
	.btn-detail {
		width: 180rpx;
		height: 60rpx;
		border-radius: 50rpx;
		color: white;
		text-align: center;
		background-color: $blue15;
		font-size: 26rpx;
		line-height: 60rpx;
		align-self: flex-end;
		margin: 10rpx 20rpx 10rpx;
	}

	.nodata {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		image {
			width: 200rpx;
			height: 100rpx;
		}

		text {
			margin-top: 35rpx;
			margin-bottom: 60rpx;
			font-size: 24rpx;
			color: #C5D3E8;
		}
	}

	//.button-container {
	//	display: flex;
	//	position: fixed;
	//	width: 100%;
	//	height: 100rpx;
	//	bottom: 0;
	//	z-index: 999;
	//	background-color: white;
	//	padding: 0 20rpx 0 0;
	//	box-sizing: border-box;
	//	display: flex;
	//	align-items: center;
	//	justify-content: space-around;
  //
	//	button {
	//		flex: 1;
	//		margin-left: 20rpx;
	//		height: 80rpx;
	//		line-height: 80rpx;
	//		border-radius: 40rpx;
	//		color: $xz-bgColor-write;
	//		background-color: $xz-bgColor-blue;
	//		font-size: 32rpx;
	//	}
  //
	//}

	.u-radio-group .u-radio:first-child {
		margin-right: 12rpx;
	}
</style>
